<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="flexiable.js"></script>
    <link rel="stylesheet" href="flexiable.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size:0;
        }
        .box{
            font-size: 0;
        }
        .img__btn{
            width: 3.333333rem;
            height: 3.333333rem;
            background: skyblue;
            cursor: pointer;
            position: relative;
            display: inline-block;
            border-radius: 3px;
            font-size: 0;
        }
        .img__btn::before,.img__btn::after{
            content: '';
            font-size: 0;
            background-color: #ffffff;
            border-radius: 2px;
            position: absolute;
        }
        .img__btn::before{
            width: 2.133333333rem;
            height: 2px;
            top:1.626666667rem;
            left:.586666667rem;
        }
        .img__btn::after{
            width: 2px;
            height: 2.13333333rem;
            top:.586666667rem;
            left:1.62666667rem;
        }
        input[type=file]{
            display: none;
        }
        .img--item{
            display: inline-block;
            position: relative;
            overflow: hidden;
            width: 3.333333rem;
            height: 3.333333rem;
            border-radius: 3px;
            border: 6px solid #ffffff;
            box-sizing: border-box;
        }
        .imgCon{
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="file" multiple>
    </div>
    <div class="img__btn"></div>
</body>
<script>
    var img__btn = document.getElementsByClassName("img__btn")[0];
    var fileInput = document.getElementsByTagName('input')[0];
    var box = document.getElementsByClassName("box")[0];
    var imgArr = [];
    var index = 0; //有效图片张数
    box.style.cssText = 'width:9.999999rem';
    img__btn.onclick = function() {
        fileInput.click();
    };
    fileInput.onchange = function (){
        var count = Math.min((9 - index), this.files.length);
        for(var i = 0; i < count; i++){
                var imgCountainer = document.createElement("div");
                index++;
                imgCountainer.onclick = function() {
                    this.outerHTML = '';
                    delete imgArr[this['data-index'] - 1];
                    index --;
                    if(index < 9){
                        img__btn.style.display = "block";
                    }
                }
                imgCountainer.className = "img--item";
                var img = document.createElement("img");
                img.className = 'imgCon';
                img.src = window.URL.createObjectURL(this.files[i]);
                imgArr.push(this.files[i]);
                imgCountainer['data-index'] = imgArr.length;
                if(index > 8){
                    img__btn.style.display = "none";
                    alert("图片最多上传9张");
                }
                img.onload = function(){
                    var imgSize = [this.width, this.height];
                    if(imgSize[0] > imgSize[1]){
                        this.style.height = '3.333333rem';
                        this.style.left = -((imgSize[0]*(60/imgSize[1]) - 60)/2)/37.5 + "rem";
                    }else{
                        this.style.width = '3.333333rem';
                        this.style.left = -((imgSize[1]*(60/imgSize[0]) - 60)/2)/37.5 + "rem";
                    }
                }
                imgCountainer.appendChild(img);
                box.appendChild(imgCountainer);
        };
        this.value = '';
//        box.appendChild(img__btn);
    };
</script>
</html>